<template>
  <div class="home">
    <h3>{{ msg }} {{ count }} {{ num }}</h3>
    <p>{{ str }}</p>
    <el-button type="warning" round>Warning</el-button>
    <li v-for="item in obj.arr" v-bind:key="item">{{ item }}</li>
    <div>
      <el-button @click="foo1" type="success" round>点击修改标题1</el-button>
    </div>
    <hr>
    <div>
      <el-button @click="foo2" type="primary" round>点击修改标题1</el-button>
    </div>
    <hr>
    <div>
      <el-button @click="foo3" type="danger" round>点击修改标题2</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入定义组件、定义基本类型，定义引用类型的方法
import { defineComponent, ref, reactive, toRefs } from 'vue'

import {escape, unescape}  from 'html-escaper'
// escape('<p>')
// unescape('&lt;p&gt;p&lt;p&gt;')


// 引入储存test模块数据的仓库
// import useTestStore from '../stores/test'
// #引入创建对象和结构取值的方法
// import { storeToRefs } from 'pinia'
// #取出储存在useTestStore对象中的数据
// let { msg , count } = storeToRefs(useTestStore())


import useTestStore from '../stores/test'
// 创建testStore对象
let testStore = useTestStore() // 事件可以直接修改state对象的属性
// 解构赋值
let { msg, count, num } = toRefs(testStore)
// 定义字符串
let str = ref("today")
// 定义对象
let obj: any = reactive({ arr: [] })
// 给对象中的数组添加数据
obj.arr.push("1")
obj.arr.push("2")
obj.arr.push("3")
console.log(obj.arr)
// 编写函数调用pinia下action的方法
const foo1 = () => {
  testStore.msgFunc()
}
// 编写函数调用pinia下action的方法
const foo2 = () => {
  testStore.numFunc(999)
}
// 修改state对象下属性
const foo3 = () => {
  testStore.$patch({
    msg: '你好,pinia',
    num: 88,
  })
}
</script>
